<template>
  <transition name="fade">
    <div
      class="toast-container"
      v-show="visibled"
      :style="{
        top: position === 'top' ? '10%' : position === 'bottom' ? '90%' : '50%',
      }"
    >
      <div class="toast-conent">
        <div class="toast-top" v-if="toastType">
          <template v-if="toastType === 'success'">
            <svg
              class="icon"
              style="
                width: 22px;
                height: 22px;
                vertical-align: middle;
                fill: currentColor;
                overflow: hidden;
              "
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2563"
            >
              <path
                d="M25.6 523.8784L128 440.32l234.9568 175.872S630.9376 315.2896 959.1808 112.64l39.2192 47.6672S625.0496 485.1712 432.128 911.36L25.6 523.8784z"
                p-id="2564"
              ></path>
            </svg>
          </template>
          <template v-if="toastType === 'fail'">
            <svg
              class="icon"
              style="
                width: 22px;
                height: 22px;
                vertical-align: middle;
                fill: currentColor;
                overflow: hidden;
              "
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="12177"
            >
              <path
                d="M496.64 714.752c-44.032 0-79.36 34.816-79.36 77.824 0 43.008 35.84 77.824 79.36 77.824s79.36-34.816 79.36-77.824c0-43.008-35.328-77.824-79.36-77.824zM496.64 117.76c-63.488 0-115.2 50.176-115.2 112.64 0 5.632 0.512 11.776 1.536 17.408h-1.536 1.536c2.048 11.264 5.12 22.016 10.24 32.256l66.048 321.024c1.536 8.192 5.12 15.872 9.728 22.528 13.312 17.92 40.448 42.496 62.976-12.288 2.56 1.536 57.344-269.312 71.168-338.432 5.12-12.8 8.192-27.136 8.192-41.984 0.512-62.976-51.2-113.152-114.688-113.152z"
                fill="#fff"
                p-id="12178"
              ></path>
            </svg>
          </template>
        </div>
        <div :style="{ 'text-align': messageAlign }">
          {{ message }}
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "xrkToast",
  data() {
    return {
      visibled: false,
    };
  },
  props: {
    message: {
      type: String,
    },
    toastType: {
      type: String,
      default: "",
    },
    delay: {
      type: Number,
      default: 1500,
    },
    position: {
      type: String,
      default: "center",
    },
    messageAlign: {
      type: String,
      default: "conter",
    },
  },
  methods: {
    showToast(removeComponent) {
      setTimeout(() => {
        this.visibled = true;
      }, 50);
      this.cleanCache = removeComponent;
    },
    removeSelf() {
      this.visibled = false;
      setTimeout(() => {
        document.body.removeChild(this.$el);
        this.$destroy();
      }, 1000);
    },
  },
  mounted() {
    setTimeout(() => {
      this.removeSelf();
    }, this.delay);
  },
};
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.toast-container {
  position: fixed;
  // top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  font-size: 0;
  width: fit-content;
  max-width: 70%;
  .toast-conent {
    border-radius: 8px;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-align: left;
    word-break: break-all;
    font-size: 14px;
  }
  .toast-top {
    text-align: center;
    margin-bottom: 6px;
  }
}
</style>